<template>
    <section class="content-box">
        <div>
        <!--工具条-->
        <el-col class="toolbar">
            <el-col :span="12">
                <h2>产品</h2>
            </el-col>
            <el-col :span="12">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入查询项"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" v-on:click="handleFilterd"> 查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" class="el-icon-plus" @click="handleAdd"> 新建</el-button>
                    </el-form-item>
                    <label for="file" class="label-file">导入</label>
                    <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" />
                </el-form>
            </el-col>
        </el-col>
        <!--列表-->
        <el-table :data="tableData" class="indexList" highlight-current-row>
            <el-table-column prop="Product_Code" label="编号" width="100" sortable>
            </el-table-column>
            <el-table-column prop="Product_Name" label="名称" width="200" sortable>
            </el-table-column>
            <el-table-column prop="norms" label="规格"  sortable>
            </el-table-column>
            <el-table-column prop="unit" label="单位"  sortable>
            </el-table-column>
            <el-table-column prop="ProductType" label="类型" width="120" sortable>
            </el-table-column>
            <el-table-column label="操作" width="200" >
                <template slot-scope="scope">
                    <!-- scope.$index 当前列表项index  , row 当前行的所有字段。  -->
                    <el-button-group>
                        <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                        <el-button size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
    <!--     <el-col :span="24" class="toolbar">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
            </el-pagination>
        </el-col> -->

        <!--新增界面-->
        <el-dialog title="添加" :visible.sync="addFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="addForm" :label-width="formLabelWidth" :rules="addFormRules" ref="addForm" >
                <el-form-item label="产品名称：" prop="Product_Name">
                    <el-input v-model="addForm.Product_Name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格型号：" prop="norms">
                    <el-input v-model="addForm.norms" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位：" prop="unit">
                    <el-input v-model="addForm.unit" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="addForm.ProductType" placeholder="请选择供应商类型">
                        <el-option v-for="item in options" :key="item.Value" :label="item.Key" :value="item.Key"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="editForm" :label-width="formLabelWidth" :rules="editFormRules" ref="editForm"> 
                <el-form-item label="产品名称：" prop="Product_Name">
                    <el-input v-model="editForm.Product_Name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="规格型号：">
                    <el-input v-model="editForm.norms" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位：">
                    <el-input v-model="editForm.unit" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="editForm.ProductType" placeholder="请选择供应商类型">
                        <el-option v-for="item in options" :key="item.Value" :label="item.Key" :value="item.Key"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="editSubmit">确 定</el-button>
            </div>
        </el-dialog>
        </div>
    </section>
</template>
<script>
import axios from '../../util/axios';
export default {
    name: 'Product',
    data() {
        return {
            tableData: [],//数据列表
            addFormVisible: false, //新增界面是否显示
            editFormVisible: false, //编辑界面是否显示
            formLabelWidth: '120px',//input输入框宽度
            total: 0, //数据总数
            rows: 10, //每页显示多少条
            currentPage: 1,//当前页数
            filters: { //查询项
                name: '',
            },
            addFormRules: {//新增表单验证提示
                Product_Name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }]
            },
            editFormRules: {//编辑表单验证提示
                Product_Name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }]
            },
            options: [],
            //新增界面数据
            addForm: {
                Product_Name: '',//产品名称
                norms: '',//规格
                unit: '',//单位
                ProductType: ''//类型
            },
            //编辑界面数据
            editForm: {
                Product_Name: '',//产品名称
                norms: '',//规格
                unit: '',//单位
                ProductType: '',//类型
                key: ''
            }
        }
    },
    methods:{
        changePage(page) {//当前页数
            this.currentPage = page;
            this.getList();
        },
        update(e){
          let file = e.target.files[0];           
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post('importProduct',param,config)
          .then(response=>{
            console.log(response.data);
          })        
        },
        getList(){ //异步获取客户列表     
            axios.post("getProductList"/* ,{
                page: this.currentPage,  // 当前页数， 
                rows: this.rows // 每页多少条
            } */).then(data => {
                /* this.total = data.total; *///总页数
                this.tableData = data.rows //客户列表渲染到表格上
            }).catch(err => {
                console.log(err);
            })
        },
        /**
         * 查询项
         */
        handleFilterd() {
            var filterName = {"groupOp":"OR","rules":[{"field":"Product_Name","op":"cn","data":this.filters.name},{"field":"Product_Code","op":"cn","data":this.filters.name}],"groups":[]};
            axios.post("getProductList",{filter:JSON.stringify(filterName)}).then(data => {
                this.tableData = data.rows;
            }).catch(err => {
                console.log(err);
            })
        },
        getType:function(){
            axios.post("typeProduct").then(data => {
                this.options = data;
            })
        }, 
        handleAdd: function() {//显示新增界面
            this.addForm = {           
                Product_Name: '',//产品名称
                norms: '',//规格
                unit: '',//单位
                ProductType: ''//类型
            };
            this.addFormVisible = true;
        },
        //编辑
        editSubmit: function() {
            this.$refs.editForm.validate((valid) => {
                if(valid) {
                    this.$confirm('确认提交吗？','提示',{}).then(() => {
                        let para = Object.assign({ key:this.editForm.ID}, this.editForm);
                        axios.post("editProduct",para).then((res) => {
                            this.$notify.success({
                                title: '成功',
                                message: `编号`+para.Product_Code+`   修改成功！！`,
                                type: 'success',
                                offset: 200,
                                duration: 1800
                            });                  
                            this.$refs['editForm'].resetFields();
							this.editFormVisible = false;
							this.getList();
                        });
                    });
                }
            });
        },
        //新增
        addSubmit: function() { //提交表单
            this.$refs.addForm.validate((valid) => {//验证
                if(valid) {
                    this.$confirm('确认提交吗？','提示',{}).then(() => {
                        let para = Object.assign({}, this.addForm);//拷贝对象进去
                        axios.post("addProduct",para).then((res) => { //axios
                            this.$notify.success({
                                title: '成功',
                                message:'新增成功',
                                type:'success',
                                offset: 200,
                                duration: 1800
                            });
                            this.addFormVisible = false;//关闭窗口
                            this.getList();//重新刷新列表
                            this.$refs['addForm'].resetFields();
                        });
                    });
                }
            });
        },
        handleEdit: function(key,row) {//显示编辑界面
            this.editFormVisible = true;
            this.editForm = Object.assign({},row);
        },
        handleDel: function(key, row) {//删除         
            console.log(key, row);
            this.$confirm('确认删除该信息吗？','提示',{
                type:'warning'
            }).then(() => {
                let para = {
                    code: row.Product_Code,
                    key: row.ID
                };
                console.log(para);
                axios.post('deleProduct',para).then((res) => {
					//NProgress.done();
					this.$notify.success({
                        title: '成功',
						message: `编号`+para.code+` 删除成功！！！`,
                        type: 'success',                       
                        offset: 200,
                        duration: 1800
					});
					this.getList();
				});
            }).catch((err) => {
                console.log(err);
            });
        }
    },
    mounted(){
        this.getList();//初始化页面时候就要率先执行获取列表类型接口
        this.getType();//初始化页面时候就要率先执行获取供应商类型接口
    }
}
</script>

<style scoped lang="scss">
@import '../../common/css/index.css';
label.label-file{
    margin:0;
}
</style>